<template>
  <div class="form-container">
    <a-list item-layout="horizontal" :pagination="pagination" :data-source="data" class="com-list">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-list-item-meta
            :description="'热度：'+item.postHot"
        >
          <a slot="title" @click="navTo(item)" style="font-size: 17px">{{ item.postTitle }}</a>
          <img slot="avatar" src="../assets/file.png" alt="" style="width: 50px;height: 50px">
        </a-list-item-meta>
        <div>
          <div style="text-align: center">{{item.postUid}}</div>
          <div style="color: #f8334f;margin-top: 8px">{{item.postTime}}</div>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import {getCommunicationList} from "../api";
const data = [];
export default {
  name: "Communication",
  data() {
    return {
      data,
      pagination: {
        total: 0,
        defaultPageSize: 10,
        onChange:(page,pageSize)=>this.getList(page,pageSize),//点击页码事件
      },
      // pagination: {
      //   onChange: page => {
      //     console.log(page);
      //   },
      //   pageSize: 10,
      // },
    };
  },
  created() {
    //列表查询
    this.getList()
  },
  methods: {
    getList(pageNum=1, pageSize=20){
      this.pageNum = pageNum
      let params = {
        pageNum: pageNum,
        pageSize: pageSize
      }
      getCommunicationList(params)
        .then((res) => {
          if (res.status == 200){
            console.log('get', res)
            this.data = res.data.list
            this.pagination.total = res.data.total
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    navTo(item) {
      console.log('帖子', item)
      this.$router.push({name: 'communicationDetail', params: {postId: item.postId}})
    }
  }
}
</script>

<style scoped>
  .form-container {
    display: flex;
    justify-content: center;
  }
  .com-list {
    width: 1000px;
    padding: 0px 30px 30px 30px;
    border-radius: 10px;
    border: 1px solid #5DD5C8;
    margin: 50px 0px;
  }
</style>